import Taro from '@tarojs/taro'
import React, { useCallback, useMemo } from 'react'
import HomeGrid from '@COMPONENTS/Home/HomeGrid'
import { View } from '@tarojs/components'
import Images from '@ASSET/Images'
import i18n from '@I18N'
import Navigate from '@NAVIGATION/navigateManager'
import { Analytic_Type } from '@CONSTANTS/analytic'
import { requestSubscribeAndSave } from '@UTILS/subscribeMessage'
import { STORE_ROUTER_DATA, SUBSCRIBES_EVENT } from '@CONSTANTS/common'
import { openPage } from '@UTILS/common'
import style from './HomeHeader.module.scss'

interface Props {
  showLogin: () => void,
  isVisitor: boolean,
  myDoctorMessageCount: number,
  showHeader: boolean
}

interface ConfigItemITF {
  disabledVerify: boolean,
  onClick: () => void,
  src: string,
  text: string,
  eventId?: string,
  newIcon?: string,
  bgColor: string,
  showLogin?: () => void,
  unReadCount?: number
}

const HomeHeader: React.FC<Props> = ({ showLogin, isVisitor, myDoctorMessageCount, showHeader }) => {
  const onClickPainTest = useCallback(() => {
    Navigate.decisionList()
    Taro.tracker.trackEvent(Analytic_Type.num_home_test.eventId)
  }, [])
  const onQuickLinc = useCallback(() => {
    Taro.tracker.trackEvent(Analytic_Type.num_quick_consul.eventId)
    openPage('wmpRoute', STORE_ROUTER_DATA)
  }, [])
  const onClickMyDoctor = useCallback(() => {
    requestSubscribeAndSave(SUBSCRIBES_EVENT.DOCTOR_FOLLOWUP_REPLY, {})
    Navigate.messageList()
    Taro.tracker.trackEvent(Analytic_Type.num_my_doctor.eventId)
  }, [])
  const configs = useMemo<ConfigItemITF[]>(() => [
    {
      disabledVerify: true,
      onClick: onClickPainTest,
      src: Images.home.pain_self_test,
      text: i18n.home.pain_test(),
      bgColor: 'rgba(255, 133, 71, 0.08)'
    },
    {
      disabledVerify: false,
      eventId: Analytic_Type.num_pain_store.eventId,
      onClick: onQuickLinc,
      showLogin,
      src: Images.home.home_store,
      newIcon: Images.home.home_new,
      text: i18n.home.pain_store(),
      bgColor: 'rgba(85, 184, 255, 0.08)'
    },
    {
      disabledVerify: false,
      showLogin,
      eventId: Analytic_Type.num_my_doctor.eventId,
      onClick: onClickMyDoctor,
      src: Images.home.my_doctor,
      text: i18n.home.myDoctor_title(),
      unReadCount: isVisitor ? 0 : myDoctorMessageCount,
      bgColor: 'rgba(71, 198, 144, 0.08)'
    }
  ], [isVisitor, myDoctorMessageCount, onClickMyDoctor, onClickPainTest, onQuickLinc, showLogin])

  if (!showHeader) return null
  return (
    <View className={style.homeCards}>
      {configs.map((item, index: number) => {
        const { disabledVerify, onClick, src, text, eventId, showLogin: showLoginFunc, unReadCount, bgColor, newIcon } = item
        return (
          <HomeGrid
            key={`${index}`}
            disabledVerify={disabledVerify}
            onClick={onClick}
            src={src}
            text={text}
            eventId={eventId}
            showLogin={showLoginFunc}
            unReadCount={unReadCount}
            bgColor={bgColor}
            newIcon={newIcon}
          />
        )
      })}
    </View>
  )
}

export default HomeHeader
